<script setup lang="ts">
import { ref, watch } from 'vue'
import axios from 'axios'
import type { ArticleItem, ArticleResData } from '@/types/data'

const props = defineProps<{ channelId: number }>()

const articles = ref<ArticleItem[]>([])

watch(
  () => props.channelId,
  async () => {
    const res = await axios.get<ArticleResData>(
      `http://geek.itheima.net/v1_0/articles`,
      {
        params: {
          channel_id: props.channelId,
          timestamp: Date.now(),
        },
      },
    )
    articles.value = res.data.data.results
  },
  { immediate: true },
)
</script>

<template>
  <div class="article-list">
    <div
      class="article-item"
      @click="$router.push(`/detail/${item.art_id}`)"
      v-for="item in articles"
      :key="item.art_id"
    >
      <p class="title">
        {{ item.title }}
      </p>
      <img
        v-for="(src, i) in item.cover.images"
        :key="i"
        class="img"
        :src="src"
        alt=""
      />
      <div class="info">
        <span>{{ item.aut_name }}</span>
        <span>{{ item.comm_count }}</span>
        <span>{{ item.pubdate }}</span>
      </div>
    </div>
  </div>
</template>
